<template>
  <div class="layout-web">
    <Layout>
        <Sider hide-trigger>
          <AdminSider></AdminSider>
        </Sider>
        <Layout>
            <Header :style="{padding:0}"><AdminHeader /></Header>
            <AdminPosition />
            <Content class="demo-content">
                <router-view />
            </Content>
            <Footer :style="{padding:0}"><AdminFooter /></Footer>
        </Layout>
            
    </Layout>
  </div>
</template>

<script>
import AdminHeader from './AdminHeader'
import AdminFooter from './AdminFooter'
import AdminSider from './AdminSider'
import AdminPosition from './AdminPosition'

export default {
  components: {AdminHeader, AdminFooter, AdminSider, AdminPosition}
}
</script>
<style lang="less" scoped>
  .layout-web {
    height: 100vh;
  }
  .demo-content{
    background: #fff;
    height: calc(100vh - 154px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
  }
  .slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

